<template>
	<div style="background:#fff;">
		<div class="server_con">
			<h4 style="text-align: left;">常见问题</h4>
			<div class="aui-searchbar-input search_question">
				<i class="icon njfont nj-sousuo"></i>
				<input type="search" placeholder="有问题？点我搜搜看吧~" id="serverSearchInput" v-model="describle">
				<!--输入信息直接过滤问题不用点击搜索，点击关闭图标清除搜索-->
				<div class="aui-searchbar-clear-btn">
					<i class="aui-iconfont aui-icon-close"></i>
				</div>
			</div>
			<ul id="commonquestion_list">
                <li v-if="!data || !data.length>0">
					<img src="static/image/no_data.png" alt="">
					<p>暂无相关问题</p>
				</li>
				<li  v-for="(item,index) in data"
             :key="index"
             style="text-align: left;">
					<p class="zxQuestion">Q：{{ item.describle}}</p>
					<div style="display: flex;"><span>A：</span><p  class="aui-text-danger zxQuestion" v-html="item.answer" ></p></div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	 export default {
        props: {
         	data:{
         		type:Array,
         		default:function(){
         			return []
         		}
         	},
         	initData: {
         		type:Function,
         		default:()=>{}
         	}

        },
        data () {
            return {
                describle: null,
            }
        },
        computed:{

        },
        methods: {

        },
        filters: {
        	mHtml(val, val2) {
        		console.log(val, val2);
        		return val + val2;
        	}
        },
        created(){
            
        },
        watch: {
			describle(newValue, oldValue) {
				console.log(newValue, oldValue,'newValue, oldValue')
//				this.initData(newValue)
				this.$emit('toParent',this.describle);
			},
		}
    }
</script>

<style scoped="scoped">
	.zxQuestion{
		overflow:hidden;
		word-spacing: normal;
		word-wrap:break-word;
	}
</style>
